<!DOCTYPE html>
<html lang="en" class="page-fill">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/oksub.css"/>
</head>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<body class="page-fill">
    <div class="page-fill" id="login">
        <form class="layui-form" action="../login">
            <div class="login_face"><img src="../images/logo.png"></div>
            <div class="layui-form-item input-item">
                <label for="username">用户名</label>
                <input type="text" lay-verify="required" name="username"  autocomplete="off" id="username" class="layui-input" v-model="username">
            </div>
            <div class="layui-form-item input-item">
                <label for="password">密码</label>
                <input type="password" lay-verify="required|password" name="password"  autocomplete="off" id="password" class="layui-input" v-model="pwd">
            </div>
            <div class="layui-form-item input-item captcha-box">
                <label for="captcha">验证码</label>
                <input type="text" lay-verify="required|captcha" name="captcha" placeholder="请输入验证码" autocomplete="off" id="captcha" maxlength="4" class="layui-input">
                <div class="img ok-none-select" id="captchaImg"></div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-block" lay-filter="login" lay-submit="">登录</button>
            </div>
            <div class="login-link">
                <a href="../html/register.html">注册</a>
                <a href="forget.html">忘记密码?</a>
            </div>
        </form>
    </div>
    <!--js逻辑-->
    <script src="../lib/layui/layui.js"></script>
    <script>

      let login=  new Vue({
            el:"#login",
          data:{
               username:'chxchx',
                pwd:'chxchx',

          },
          methods: {
              fetchLogin() {
                  var params = new URLSearchParams();
                  params.append("username", this.username);
                  params.append("pwd", this.pwd);

                  axios.post("../login?op=login", params).then(resp => {
                      var jm=resp.data;
                      if (jm.code===1){

                          alert("登陆成功");
                          sessionStorage.setItem('userid', jm.obj[0].id);
                          window.location.href = "index.html";
                      }else if (jm.code===0){
                          alert(jm.code);
                          alert("登陆失败,密码或用户名错误");
                      }else {
                          alert("系统出错");
                      }
                  }).catch(error => {
                      console.log(error);
                  })
              },
          },
                mounted(){
                    let vm = this;
                    layui.use(["form", "okGVerify", "okUtils", "okLayer"], function () {
                        let form = layui.form;
                        let $ = layui.jquery;
                        let okGVerify = layui.okGVerify;
                        let okUtils = layui.okUtils;
                        let okLayer = layui.okLayer;

                        /**
                         * 初始化验证码
                         */
                        let verifyCode = new okGVerify("#captchaImg");

                        /**
                         * 数据校验
                         */
                        form.verify({
                            password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
                            captcha: function (val) {
                                if (verifyCode.validate(val) !== "true") {
                                    return verifyCode.validate(val)
                                }
                            }
                        });
                        form.on('submit(login)', function(data){
                            // 阻止表单的默认提交行为
                            data.elem.disabled = true; // 禁用提交按钮，防止重复提交
                            console.log("username="+vm.username+"pwd="+vm.pwd);
                            vm.fetchLogin(); // 调用Vue.js的登录方法
                            return false; // 阻止表单的默认提交
                        });
                        /**
                         * 表单input组件单击时
                         */
                        $("#login .input-item .layui-input").click(function (e) {
                            e.stopPropagation();
                            $(this).addClass("layui-input-focus").find(".layui-input").focus();
                        });

                        /**
                         * 表单input组件获取焦点时
                         */
                        $("#login .layui-form-item .layui-input").focus(function () {
                            $(this).parent().addClass("layui-input-focus");
                        });

                        /**
                         * 表单input组件失去焦点时
                         */
                        $("#login .layui-form-item .layui-input").blur(function () {
                            $(this).parent().removeClass("layui-input-focus");
                            if ($(this).val() != "") {
                                $(this).parent().addClass("layui-input-active");
                            } else {
                                $(this).parent().removeClass("layui-input-active");
                            }
                        })
                    });
                }

        });

    </script>
</body>
</html>
